<template>
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbObj"
        :replace="true"
        :key="index"
      >
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      breadcrumbObj: [],
    };
  },
  computed: {
    ...mapState("base", ["breadcrumb"]),
    getBreadcrumb() {
      return this.breadcrumb;
    },
  },
  watch: {
    getBreadcrumb(data) {
      this.breadcrumbObj = data;
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 24px;
}
</style>
